<template>
  <q-item clickable @click="dialog = true">
    <q-item-section side>
      <q-icon name="content_copy" size="xs" />
    </q-item-section>
    <q-item-section>
      <q-item-label>{{ t('indices.index_clone.text') }}</q-item-label>
    </q-item-section>
  </q-item>

  <q-dialog v-model="dialog" transition-duration="100">
    <q-card style="width: 600px; max-width: 80vw">
      <q-card-section class="flex justify-between">
        <div class="flex">
          <h2 class="text-h6 q-my-none flex">
            {{ t('indices.index_clone.heading') }}
          </h2>
        </div>
        <q-btn v-close-popup icon="close" flat round dense />
      </q-card-section>

      <q-separator />

      <q-form @submit="clone">
        <q-card-section>
          <p>{{ t('indices.index_clone.index', { index }) }}</p>

          <p class="text-muted">
            {{ t('indices.index_clone.help') }}
          </p>

          <custom-input
            v-model="dest"
            :label="t('indices.index_clone.form.target.label')"
            autocomplete="off"
            autofocus
            outlined
            required
          />
        </q-card-section>

        <q-card-section>
          <q-btn
            :disable="requestState.loading || dest.length === 0"
            color="positive"
            :loading="requestState.loading"
            :label="t('indices.index_clone.form.clone')"
            type="submit"
          />
        </q-card-section>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { useTranslation } from '../../composables/i18n'
import { IndexCloneProps, useIndexClone } from '../../composables/components/indices/IndexClone'
import CustomInput from '../shared/CustomInput.vue'

const t = useTranslation()

const props = defineProps<IndexCloneProps>()
const emit = defineEmits(['reload'])

const { dialog, requestState, clone, dest } = useIndexClone(props, emit)
</script>
